<template>
	<el-dialog width="500px" title="添加信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="姓名" props="name">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="手机号" props="mobile">
				<el-input v-model="form.mobile" />
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import { setDouyinClue } from '@/api/data'
export default {
	data() {
		return {
			form: {
				mobile: '',
				name: ''
			},
			dialogVisible: false,
			rules: {
				mobile: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' }
				],
				name: [
					{ required: true, message: '姓名不能为空', trigger: 'blur' }
				]
			},
		}
	},
	watch: {
		dialogVisible(val) {
			if (val) {
				this.form.mobile = ''
				this.form.name = ''
			} else {
				this.$refs['ruleForm'].resetFields()
			}
		}
	},
	methods: {
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					if(this.form.mobile==''||this.form.name==''){
						this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					}else{
						setDouyinClue({ ...this.form }).then(res => {
						this.dialogVisible = false
						this.$emit('getList', true)
					})
					}
					
				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>
  
<style lang="scss" scoped></style>
  